window.onload = function () {
    const url = 'https://route.showapi.com/181-1';
    var oCon = document.querySelector('.content');
    var oUl = document.querySelector('.flex_row');
    var page = 1;
    var cache = {};  //缓存池

    oUl.addEventListener('click',pageList,false);

    function pageList(e){
        if(e.target.tagName.toLowerCase() === 'li'){
            page = e.target.innerText * 1;  //获取点击页码

            if(page in cache){  //已有缓存
                console.log('已有缓存');
                showPage(cache[page]);
            }else{
                console.log('没有缓存');
                getJson();
            }
        }
    }

    //获取数据  getjson
    getJson();

    function getJson() {
        // console.time('正在拉取数据');
        var xmlHttp = new XMLHttpRequest();  //创建Ajax对象

        var params = [];  //数据中转数组
        var sendData = {   //json数据容器
            'showapi_appid': '30603',
            'showapi_sign': '98960666afeb4992ae91971d13494090',
            'page': page,
            'num': 8
        };
        for (var key in sendData) {
            params.push(key + '=' + sendData[key]);
        }
        var postData = params.join('&');  //以&为拼接符号，拼接数组内容

        //开启数据通道
        xmlHttp.open('GET', url + postData, true);

        //发送请求
        xmlHttp.send(null);

        //监听数据通道变化
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { //状态一切良好
                // var dataList = JSON.parse(xmlHttp.response).showapi_res_body.newsList;
                var dataList = [
                    {
                        'picUrl':'https://www.baidu.com/img/bd_logo1.png?where=super',
                        'title':'标题',
                        'url':'http://mp.weixin.qq.com/s/hSI0RNGR23KetTFLoYP7dQ',
                        'desctiption':'描述',
                        'ctime':'2018-8-29'
                    },
                    {
                        'picUrl':'https://www.baidu.com/img/bd_logo1.png?where=super',
                        'title':'标题',
                        'url':'http://mp.weixin.qq.com/s/hSI0RNGR23KetTFLoYP7dQ',
                        'desctiption':'描述',
                        'ctime':'2018-8-29'
                    },
                    {
                        'picUrl':'https://www.baidu.com/img/bd_logo1.png?where=super',
                        'title':'标题',
                        'url':'http://mp.weixin.qq.com/s/hSI0RNGR23KetTFLoYP7dQ',
                        'desctiption':'描述',
                        'ctime':'2018-8-29'
                    },
                    {
                        'picUrl':'https://www.baidu.com/img/bd_logo1.png?where=super',
                        'title':'标题',
                        'url':'http://mp.weixin.qq.com/s/hSI0RNGR23KetTFLoYP7dQ',
                        'desctiption':'描述',
                        'ctime':'2018-8-29'
                    },
                    {
                        'picUrl':'https://www.baidu.com/img/bd_logo1.png?where=super',
                        'title':'标题',
                        'url':'http://mp.weixin.qq.com/s/hSI0RNGR23KetTFLoYP7dQ',
                        'desctiption':'描述',
                        'ctime':'2018-8-29'
                    },
                    {
                        'picUrl':'https://www.baidu.com/img/bd_logo1.png?where=super',
                        'title':'标题',
                        'url':'http://mp.weixin.qq.com/s/hSI0RNGR23KetTFLoYP7dQ',
                        'desctiption':'描述',
                        'ctime':'2018-8-29'
                    },
                ];

                cache[page] = dataList;
                showPage(dataList);  //调用渲染数据
            }
        };
    }

    //数据渲染组件
    function showPage(data){
        // console.log(data);
        var str = '';  //初始化模板
        for(var i=0,len=data.length;i<len;i++){
            str +=
                `<a href="${data[i].url}" target="_blank" class="items flex_row load">
                    <div class="img"><img src="${data[i].picUrl}" alt=""></div>
                    <div class="bd">
                        <p class="label">${data[i].title}</p>
                    </div>
                    <div class="ft">&GT;</div>
                </a>
                `
        }
        oCon.innerHTML = str;  //把内容放进div
        // console.timeEnd('正在拉取数据');
    }


};

/*
* 1.数据获取组件
* 2.数据渲染dom组件
*   jsonDOM解析
*       json格式的数据，渲染到dom元素上
*       1.模板
*       2.数据绑定
*       3.替换content内容
* 3.分页业务实现
*   3.1 事件代理 ！= 事件绑定
*   3.2 改变page
*   3.3 拉取数据 -- 渲染数据
*
* 4.缓存代理业务实现
*   4.1 渲染过的数据要存储
* 5.
*
*
* */
